<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="initMethod"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="initMethod">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button v-permission="['admin','identity:add']" class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd" :dicts="dict.ad_status"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="tableData.content" stripe border size="small" style="width: 100%;">
      <el-table-column prop="id" label="广告ID" width="100px" align="center"/>
      <el-table-column prop="url" label="广告缩略图" align="center" width="300px">
        <template slot-scope="scope">
          <el-image :src="scope.row.url" fit="scale-down" style="height: 90px">
            <div slot="placeholder" style="background:#62b57f;">加载中...</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="名称" align="center"/>
      <el-table-column prop="amount" label="价格" align="center"/>
      <el-table-column prop="shopid" label="商户ID" width="80px" align="center"/>
      <el-table-column prop="jsondataList" label="地区" align="center">
        <template slot-scope="scope">
          <!--<div>{{ scope.row.jsondataList }}</div>-->
          <div v-for="item in scope.row.jsondataList" :key="item" :prop="item" class="area_tag">
            <el-tag>{{ item }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="effectiveDate" label="开始时间" align="center"/>
      <el-table-column prop="expiryDate" label="结束时间" align="center"/>
      <el-table-column label="状态" align="center" width="100px">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            active-color="#409EFF"
            inactive-color="#F56C6C"
            @change="changeEnabled(scope.row, scope.row.status,)"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <el-pagination
        :current-page="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.size"
        :total="tableData.totalElements"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { del, edit, postRequest } from '@/api/advertisement'
import eForm from './form'
export default {
  name: 'Advertisement',
  components: { eForm },
  // 设置数据字典
  dicts: ['ad_status'],
  data() {
    return {
      loading: false,
      delLoading: false,
      isAdd: false,
      query: {
        value: '',
        type: '',
        page: 1,
        size: 10
      },
      tableData: {
        totalElements: 0,
        content: []
      },
      queryTypeOptions: [
        { key: 'id', display_name: '广告ID' }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMethod()
    })
  },
  methods: {
    checkPermission,

    initMethod() {
      postRequest('/pc/advertising', this.query).then(resp => {
        console.log(resp)
        this.tableData = resp.entity
        if (this.tableData.content !== null) {
          this.tableData.content.forEach((item) => {
            this.$set(item, 'jsondataList', item.jsondata ? item.jsondata.substring(0, item.jsondata.lastIndexOf('#')).split('#') : '')
          })
        }
      })
    },
    handleSizeChange(val) {
      this.query.size = val
      this.initMethod()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.initMethod()
    },
    add() {
      this.isAdd = true
      this.$refs.form.getToke()
      this.$refs.form.getareaList()
      this.$refs.form.dialog = true
    },
    edit(data) {
      this.isAdd = false
      const _this = this.$refs.form
      _this.getToke()
      _this.getareaList()
      _this.form = {
        id: data.id,
        url: data.url,
        shopid: data.shopid,
        province: data.province,
        city: data.city,
        region: data.region,
        jsondata: data.jsondata,
        status: data.status
      }
      if (data.jsondata) {
        const arr1 = data.jsondata.substring(0, data.jsondata.lastIndexOf('#')).split('#')
        for (var i = 0; i < arr1.length; i++) {
          _this.areaValue.push(arr1[i].split('-'))
        }
      }
      _this.fileList.push({ url: data.url })
      _this.dialog = true
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.ad_status[val] + '" 该广告, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data2 = JSON.parse(JSON.stringify(data))
        delete data2.jsondataList
        edit(data2).then(res => {
          this.$notify({
            title: this.dict.label.ad_status[val] + '成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          data.status = data.status === 1 ? 1 : 0
          console.log(err.response.data.message)
        })
      }).catch(() => {
        data.status = !data.status === 1 ? 1 : 0
      })
    },
    subDelete(id) {
      this.delLoading = true
      del(id).then(res => {
        this.delLoading = false
        this.$refs[id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      }).catch(err => {
        this.delLoading = false
        this.$refs[id].doClose()
        console.log(err.response.data.message)
      })
    }
  }
}
</script>

<style scoped>
.area_tag{
  display: inline-block;
  margin: 5px;
  cursor: default;
}
</style>
